<template>
  <div>
    <div class="pg-table" :style="tableStyle">
      <div class="pg-table_bg"></div>
      <div ref="tableRef" class="top-tab" @scroll="handleTableScroll">
        <!-- header  -->
        <header class="top-tab_fixed">
          <div class="top-tab_fixed_left">
            <div class="fixed-left">
              <div class="top-tab_fixed_left_item">
                {{ titleList[0].label }}
              </div>
            </div>
          </div>
          <div
            ref="tableHeaderRightRef"
            class="top-tab_fixed_right"
            @scroll.stop="onTableHeaderScroll"
          >
            <div class="right-contain">
              <div class="fixed-right_item">
                <template
                  v-for="titleInfo in filterTitle"
                  :key="titleInfo.sort"
                >
                  <div
                    class="top-tab_right_title_item base-td"
                    :style="{ width: `${titleInfo.width}px` }"
                  >
                    <div class="title-items">
                      <div>{{ titleInfo.label }}</div>
                      <span class="title-items_icon">
                        <van-icon
                          name="arrow-up"
                          :color="titleInfo.icon === 2 ? '#1169b5' : '#9e9e9e'"
                          @click="handleSort(titleInfo, 2)"
                        ></van-icon>
                        <van-icon
                          name="arrow-down"
                          :color="titleInfo.icon === 1 ? '#1169b5' : '#9e9e9e'"
                          @click="handleSort(titleInfo, 1)"
                        ></van-icon>
                      </span>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </header>
        <!-- table body -->
        <section class="wp">
          <van-list
            v-model:loading="loading"
            stop
            :finished="finished"
            finished-text="加载完毕"
            @load="onLoad"
          >
            <div class="top-contain">
              <!-- 第一列 -->
              <div class="top-tab_left">
                <div class="top-tab_left_organ">
                  <div class="top-tab_left_organ_title">
                    {{ titleList[0].label }}
                  </div>
                  <template v-for="organ in tableData" :key="organ.name">
                    <div class="top-tab_left_organ_item">
                      <div>{{ organ.name.slice(0, 4) }}</div>
                      <div>{{ organ.name.slice(4) }}</div>
                    </div>
                  </template>
                </div>
              </div>
              <!-- 右边数据 -->
              <div
                ref="tableRightRef"
                class="top-tab_right"
                @scroll.stop="onTableRightScroll"
              >
                <!-- 标题 -->
                <div class="top-tab_right_title">
                  <template
                    v-for="titleInfo in filterTitle"
                    :key="titleInfo.sort"
                  >
                    <div
                      class="top-tab_right_title_item"
                      :style="{ width: `${titleInfo.width}px` }"
                    >
                      <div class="title-items">
                        <div>
                          {{ titleInfo.label }}
                        </div>
                        <span class="title-items_icon">
                          <van-icon
                            name="arrow-up"
                            :color="
                              titleInfo.icon === 2 ? '#1169b5' : '#9e9e9e'
                            "
                            @click="handleSort(titleInfo, 2)"
                          ></van-icon>
                          <van-icon
                            name="arrow-down"
                            :color="
                              titleInfo.icon === 1 ? '#1169b5' : '#9e9e9e'
                            "
                            @click="handleSort(titleInfo, 1)"
                          ></van-icon>
                        </span>
                      </div>
                    </div>
                  </template>
                </div>
                <!-- 数据 -->
                <div class="top-tab_right_count">
                  <template v-for="(row, i) in tableData" :key="i">
                    <div
                      :class="`top-tab_right_count_item tab-item_popup_${i}`"
                    >
                      <div v-for="(item, ins) in filterTitle" :key="ins">
                        <div
                          class="top-tab_right_count_item_ins"
                          :style="{ width: `${item.width}px` }"
                        >
                          {{ row[item.prop] }}
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </van-list>
        </section>
      </div>
    </div>

    <!-- <teleport to="body">
      <cp-teleport
        v-if="popupIndex !== -1"
        :style="{ top: topStyle }"
        :teleport-data="teleportData"
        :arrow-status="false"
      >
      </cp-teleport>
    </teleport> -->
  </div>
</template>
<script setup lang="ts">
import { TableTitleType } from './types'
import CpTeleport from './components/Teleport.vue'
import useTableScroll from './composable/tableScroll'
import useTeleport from './composable/teleport'
import useLoad from './composable/load'

interface Props {
  titleList: TableTitleType[]
  tableData: any[]
}
const props = defineProps<Props>()

const tableStyle = computed(() => {
  return `--columnWidth: ${props.titleList[0]['width']}px`
})

const filterTitle = computed(() => {
  return props.titleList.filter((item) => item.sort !== 0)
})

const {
  tableHeaderRightRef,
  tableRef,
  popupIndex,
  tableRightRef,
  handleTableScroll,
  onTableRightScroll,
  onTableHeaderScroll,
} = useTableScroll()
const { loading, finished, handleSort, onLoad } = useLoad()
const { topStyle, teleportData } = useTeleport(popupIndex)
</script>
<style lang="scss" scoped>
@import './styles/index';
@import './styles/t2';
</style>
